<template>
    <div>
        <h1>活动列表显示</h1>
        活动名称：
        <input type="text" v-model="cha.name">
        类型：
         <select v-model="cha.tid">
            <option value="0">请选择</option>
             <option v-for="a in can" :value="a.hotelTypeId">{{ a.hotelTypeName }}</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>图片</th>
                    <th>活动名称</th>
                    <th>状态</th>
                    <th>类型</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in dataa">
                    <td>{{ a.id }}</td>
                    <td><img :src="axios.defaults.baseURL+a.img" style="width: 50px;height: 50px;"></td>
                    <td>{{ a.hotelName }}</td>
                    <td>{{ a.hotelStart==true?"进行中":"已结束" }}</td>
                    <td>{{ a.hotelTypeName }}</td>
                    <td>{{ a.hotelTime }}</td>
                    <td>{{ a.createTime }}</td>
                    <td><input type="button" value="修改" @click="UpDate(a.id)" ></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router';
import axios from 'axios';
import {ref,onMounted} from 'vue';
onMounted(()=>{
    Show()
    Bang()
})
const router = useRouter()

const UpDate=(mid:number)=>{
    alert(mid);
    router.push({path:"/Update",query:{id:mid}})
}

var can = ref({
    hotelTypeId: 0,
    hotelTypeName: ""
  })

  const Bang=()=>{
    axios.get("/api/HotelType/Show").then(res=>{
        can.value=res.data
    })
  }

  var cha = ref({
    name:'',
    tid:0
  })

var dataa =ref({
    id: 0,
    img: "",
    hotelName: "",
    hotelStart: true,
    hotelTypeId: 0,
    hotelTime: "",
    createTime: "",
    hotelTypeName: ""
  })

//调用显示方法
const Show=()=>{
    axios.get("/api/Hotel/Show",{params:cha.value}).then(res=>{
        dataa.value =res.data
    })
}

</script>
<style scoped>
</style>